import React,{Component} from 'react';
import { Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';

import { connect } from 'react-redux'
import { increase,decrease,addToCart,toOne} from '../actions'

const mapStateToProps = (state)=>{
  var length=state.detail.length;
  return {
      count: state.counter.count,
      //detail: state.detail.length,
      //detail: state.detail.splice(length-1,length),
      detail: state.detail[length-1],
  }
}

class ProductDetails extends Component{
  rage(){
    console.log(this.props.count);
    /* if(counts>=99){
      counts=99;
    }else if(count<=1){
      counts=1;
    } */
  }
  addToCarts=(product,counts)=>{
    //console.log(product,counts);
    //console.log(this.props);
    this.props.toOne();
    this.props.addToCart(product,counts)
  }
  render(){
    const {count,increase,decrease,detail,toOne} =this.props; 
    //console.log(detail);
    return (
      <div className="productDetail">
        <div className="details-l">
          <img src={detail.img}/>
        </div>
        <div className="details-r">
          <p>商品：<span>{detail.title}</span></p>
          详情：<p>{detail.content}</p>
          <p>价格：<span> {detail.price}</span></p>
          数量：
          <div className="add-reduce">
            {/* <button onClick={()=>{}} className="reduce">-</button> */}
            <Button className="reduce" onClick={decrease}>-</Button>
            <Input type="text" value={count} onChange={this.rage}/>
            {/* <button onClick={()=>{}} className="add">+</button> */}
            <Button className="add" onClick={increase}>+</Button>
            <Button outline color="danger" className="addToCart" onClick={()=>{this.addToCarts(detail,count)}}>加入购物车</Button>
          </div>
        </div>
      </div>
    )
  }
}

export default connect(mapStateToProps,{increase,decrease,addToCart,toOne})(ProductDetails);